<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/reset.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/global.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/web.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/k15.css}"/>

    <script th:src="@{/asserts/js/vue.js}"></script>
    <style>
        .s41{
            width: 300px;
            height: 700px;
            float: left;
        }
        .s41 img{
            width: 300px;
            height: 700px;
        }
        .s42{
            width: 300px;
            height: 700px;
            float: right;
        }
        .s42 img{
            width: 300px;
            height: 700px;
        }
        .s1{
            background: #f1f7fe;
            width: 550px;
            height: 700px;
            /*margin-left: 555px;*/
            /*float: right;*/
            margin-left: 5px;
            float: left;
        }
        .s2{
            width: 550px;
            height: 600px;
        }
        .s3{
            width: 550px;
            height: 99px;
            /*        background: #0f0f0f;*/
        }
        .s3 input{
            margin-left: 70px;
            width: 400px;
            height: 30px;
        }
        .s3 button{
            width: 50px;
            height: 30px;
        }
        .p1{
            color: #231f1f;
            font-size: 20px;

        }
        .p2{
            color: brown;
        }
        .p3{
            font-size: 18px;

        }
        .p4{
            color: #f1f7fe;
            font-size: 5px;

        }


    </style>
</head>
<body class="W-body">
<div class="in-wrap" style="height: 500px">

    <header th:replace="~{commons/tag::headerBar}"></header>

    <div id="aCoursesList">
        <div class="bg-fa of">
            <section class="container">
                <header class="comm-title">
                    <span class="fr mt5"><a href="javascript:void(0)" title="换一换" class="c-master"
                                            onclick="">换一换</a></span>
                    <h2 class="fl tac">
                        <span class="c-333">为你推荐</span>
                    </h2>
                </header>
                <article class="comm-course-list">
                    <ul class="of" id="weinituijian">

                    </ul>
                    <div class="clear"></div>
                </article>
            </section>
        </div>
        <!-- /为你推荐 结束 -->
        <!-- /网校课程 开始 -->
        <div id="app">
            <div class="container">
                <div class="s41">
                    <img src="https://ts1.cn.mm.bing.net/th/id/R-C.fcd6e5546b73db06f984108f049523bb?rik=C4Vv8PAJA3mIoQ&riu=http%3a%2f%2fpic.3gbizhi.com%2f2017%2f0819%2f20170819013440526.jpg&ehk=guPmPZVxqntG%2bJ2WjPAcUsFusByItgMwbdah6c2Trqw%3d&risl=&pid=ImgRaw&r=0">
                </div>
                <div class="s1">
                    <div class="s2" style="border: 1px solid #f1f7fe ;overflow: auto">
                        <div v-for="g in msgList" style="border: 1px solid #f1f7fe">
                            <p class="p1">{{g.sender}}</p>
                            <p class="p2">{{g.createTime}}</p>
                            <p class="p3">{{g.content}}</p>
                            <p class="p4">.</p>
                        </div>
                    </div>
                    <div class="s3">
                        <input v-model="msg" /> <button @click="sendMsg">发送</button>
                    </div>
                </div>
                <div class="s42">
                    <img src="https://img.zcool.cn/community/01bb185d43ffb3a8012187f4e52440.jpg@1280w_1l_2o_100sh.jpg">
                </div>
            </div>

        </div>
        <!-- /网校课程 结束 -->
        <!-- /课程互动 开始-->

    </div>
    <!-- 公共底引入 -->
    <footer th:replace="~{commons/tag::footBar}"></footer>
</div>

    <script>
        let vueApp = new Vue({
            el:"#app",
            data:{
                msg:'',
                msgList:[],
            },
            methods:{
                sendMsg(){
                    ws.send(this.msg);
                    this.msg="";
                }
            }
        });

        // ws 协议location.host = localhost:9009
        let a  = location.host ;
        console.log(a)

        let api = "ws://"+location.host+"/wspush?roomId=0";
/*        let api = "ws://"+location.host+"/wspush?roomId="+[[${roomId}]];*/

        console.log(api);

        //连接服务器端
        let ws = new WebSocket(api);

        //接收客户端的信息
        ws.onmessage = function (e) {

            vueApp.msgList.push(JSON.parse(e.data));
            console.log(JSON.parse(e.data));

        }

    </script>

</body>
</html>